<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%--    用户管理--%>
    <meta charset="utf-8">
    <title>数据操作 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">


    <style>
        #selectBox {
            display: flex;
        }

        #updateHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #updateMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        #addHiddenBox {
            position: absolute;
            left: 10%;
            /*top: 10%;*/
            display: none;
            width: 80%;
            height: 100%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #addMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        #editBanReasonHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #editBanReasonMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        .layui-upload-list {
            display: block;
            margin: 10px 0;
            width: 102px;
            height: 102px;
            border: black 1px solid;
        }

        #demo1 {
            display: block;
            width: 102px;
            height: 102px;
            border-radius: 50%
        }

        .seeBox {
            display: block;
            z-index: 999999;
        }

        .userImgPath {
            border-radius: 50%;
            width: 28px;
            height: 28px;
        }
    </style>

</head>
<body>

<form class="layui-form" id="selectBox" action="/apartment/queryApartment"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">查询用户</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="输入姓名或者昵称查询用户"
                   autocomplete="off" class="layui-input" id="selectUserParam">
        </div>
    </div>
    <button class="layui-btn" type="button" lay-filter="selectUserButton" id="selectUserButton">查询</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
</form>

<table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>


<div id="updateMainBox">
    <div id="updateHiddenBox">
        <form class="layui-form" lay-filter="updateUser">
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">id</label>
                <div class="layui-input-block">
                    <input type="text" name="id" id="updateUserId" required lay-verify="required" placeholder="请输入id"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" id="updateUserName" required lay-verify="required"
                           placeholder="请输入姓名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input type="text" name="userNickname" id="updateUserNickname" required lay-verify="required"
                           placeholder="请输入昵称"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">系统密码</label>
                <div class="layui-input-inline">
                    <input type="text" name="systemPassword" id="updateSystemPassword" required lay-verify="required"
                           placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="userPhone" id="updateUserPhone" required lay-verify="phone"
                           placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline">
                    <%--                    <input type="text" name="birthday" id="updateBirthday" required lay-verify="phone" placeholder="请输入密码"--%>
                    <%--                           autocomplete="off" class="layui-input">--%>
                    <input type="text" class="layui-input" id="updateBirthday" lay-verify="required" name="birthday"
                           autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份证</label>
                <div class="layui-input-inline">
                    <input type="text" name="idCard" id="updateIdCard" required lay-verify="required"
                           placeholder="请输入身份证"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <%--            <div class="layui-form-item">--%>
            <%--                <label class="layui-form-label">状态</label>--%>
            <%--                <div class="layui-input-block">--%>
            <%--                    <select name="status" lay-verify="required" id="updateStatus">--%>
            <%--                        <option value="1">正常</option>--%>
            <%--                        <option value="0">封禁</option>--%>
            <%--                    </select>--%>
            <%--                </div>--%>
            <%--            </div>--%>
            <div class="layui-form-item">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-block">
                    <select name="occupationType" lay-verify="required" id="updateOccupationType">
                        <option value="3" id="occupationTypeItem3">业主</option>
                        <option value="1" id="occupationTypeItem1">管理员</option>
                        <option value="2" id="occupationTypeItem2">物业维修人员</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="updateReturnWindows">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="addMainBox">
    <div id="addHiddenBox">
        <form class="layui-form" lay-filter="addForm" id="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" id="addUserName" required lay-verify="required"
                           placeholder="请输入姓名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input type="text" name="userNickname" id="addUserNickname" required lay-verify="required"
                           placeholder="请输入昵称"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <%--            <div class="layui-form-item">--%>
            <%--                <label class="layui-form-label">系统密码</label>--%>
            <%--                <div class="layui-input-inline">--%>
            <%--                    <input type="text" name="systemPassword" id="addSystemPassword" required lay-verify="required" placeholder="请输入密码"--%>
            <%--                           autocomplete="off" class="layui-input">--%>
            <%--                </div>--%>
            <%--            </div>--%>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="userPhone" id="addUserPhone" required lay-verify="required"
                           placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                    <input type="text" class="layui-input" id="addBirthday" lay-verify="required" name="birthday"
                           autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">身份证</label>
                <div class="layui-input-inline">
                    <input type="text" name="idCard" id="idCard" required lay-verify="required" placeholder="请输入身份证信息"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <input type="text" id="imgPath" name="imgPath" hidden>

            <%--头像上传--%>
            <div class="layui-form-item" style="margin-left: 110px">
                <div class="layui-inline">
                    <%--                    <div class="layui-upload">--%>
                    <button type="button" class="layui-btn" id="uploadImg">上传头像</button>
                    <%--                    </div>--%>
                </div>
            </div>

            <%--            <div class="layui-form-item" >--%>
            <%--                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->--%>
            <div class="layui-upload-list" style="margin-left: 110px;border-radius: 50%">
                <img class="layui-upload-img" id="demo1">
                <p id="demoText"></p>
            </div>
            <%--                </div>--%>
            <%--            </div>--%>


            <%--            <div class="layui-form-item">--%>
            <%--                <label class="layui-form-label">状态</label>--%>
            <%--                <div class="layui-input-block">--%>
            <%--                    <select name="status" lay-verify="required" id="addStatus">--%>
            <%--                        <option value="1">正常</option>--%>
            <%--&lt;%&ndash;                        <option value="0">封禁</option>&ndash;%&gt;--%>
            <%--                    </select>--%>
            <%--                </div>--%>
            <%--            </div>--%>
            <div class="layui-form-item">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-block">
                    <select name="occupationType" lay-verify="required" id="addOccupationType">
                        <option value="3">业主</option>
                        <option value="1">管理员</option>
                        <option value="2">物业维修人员</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <%--                    <button class="layui-btn" type="button" id="addUserButton">添加用户</button>--%>
                    <button class="layui-btn" type="button" lay-submit lay-filter="addUserButton" id="addUserButton">
                        添加用户
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="addReturnWindows">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>


<div id="editBanReasonMainBox">
    <div id="editBanReasonHiddenBox">
        <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <div class="layui-form-item" style="text-align: center">
<%--                <label class="layui-form-label">请填写封禁原因</label>--%>
                <div class="layui-input-block">
                    <input type="text" value="请填写封禁原因" class="layui-input" readonly>
                </div>
            </div>
            <input type="text" name="banReason" style="display: none" id="content" class="layui-input">
            <div class="layui-form-item layui-form-text">
                <%--                <label class="layui-form-label">公告</label>--%>
                <div class="layui-input-block">
                    <div id="wangEditor">
                        <%--                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>--%>
                    </div>
                </div>
            </div>
            <%--            <button type="button" id="btn">获取内容</button>--%>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="noticeBtn">立即提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="closeEditBox">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/html" id="test-table-operate-barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">禁用/解封用户</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑用户</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除用户</a>
</script>
<script src="${pageContext.request.contextPath}/wangEditor/js/wangEditor.min1.js"></script>
<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'layer', 'laydate', 'upload'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            admin = layui.admin,
            laydate = layui.laydate
            , upload = layui.upload;

        var E = window.wangEditor
        var editor = new E("#wangEditor")
        // 或者 const editor = new E(document.getElementById('div1'))


        // 配置 server 接口地址
        editor.config.uploadImgServer = '${pageContext.request.contextPath}/file/wangUpload';

        editor.config.uploadFileName = 'file';


        // 默认情况下，显示所有菜单
        editor.config.menus = [
            'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'indent',
            'lineHeight',
            'foreColor',
            'backColor',
            'link',
            'list',
            'todo',
            'justify',
            'quote',
            'emoticon',
            'image',
            // 'video',
            'table',
            'code',
            'splitLine',
            'undo',
            'redo',
        ]

        editor.config.uploadImgHooks = {
            // 上传图片之前
            // before: function(xhr) {
            //     console.log(xhr)
            //
            //     // 可阻止图片上传
            //     return {
            //         prevent: true,
            //         msg: '需要提示给用户的错误信息'
            //     }
            // },
            // 图片上传并返回了结果，图片插入已成功
            success: function (xhr) {
                // console.log('success', xhr);
                $("#content").val(editor.txt.html());
                // console.log(editor.txt.html());
            },
            // // 图片上传并返回了结果，但图片插入时出错了
            // fail: function(xhr, editor, resData) {
            //     console.log('fail', resData)
            // },
            // // 上传图片出错，一般为 http 请求的错误
            // error: function(xhr, editor, resData) {
            //     console.log('error', xhr, resData)
            // },
            // // 上传图片超时
            // timeout: function(xhr) {
            //     console.log('timeout')
            // },
            // // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            // customInsert: function(insertImgFn, result) {
            //     // result 即服务端返回的接口
            //     console.log('customInsert', result)
            //
            //     // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            //     insertImgFn(result.data[0])
            // }
        }

        editor.create();


        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadImg'
            , url: '${pageContext.request.contextPath}/file/upload' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                // console.log(res);
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                } else {
                    $("#imgPath").val(res.data[0]);
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        /*自定义表格模板*/
        function userImg(data) {
            // console.log(data);
            var html = '';
            html += '<img src="';
            html += data.imgPath;
            html += '"'
            html += ' class = "userImgPath"';
            html += '/>';
            return html;
        }


        /*自定义表格模板*/
        function template(data) {
            var html = ""
            if (data.status == '封禁') {
                html += '<span style="color: #c00;">封禁</span>';
            } else {
                html += '<span style="color: #00ff00;">正常</span>';
            }
            return html;
        }


        //时间插件
        //执行一个laydate实例
        laydate.render({
            elem: '#addBirthday' //指定元素
        });

        laydate.render({
            elem: '#updateBirthday' //指定元素
        });

        $("#selectUserButton").click(function () {
            var selectUserParam = $("#selectUserParam").val();
            userListTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    selectUserParam: selectUserParam
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
            // table.reload('test-table-operate',{
            //     where: { //设定异步数据接口的额外参数，任意设
            //         selectUserParam: selectUserParam
            //     }
            //     ,page: {
            //         curr: 1 //重新从第 1 页开始
            //     }
            // })
        })

        <%--控制下拉条--%>
        //监听提交
        //更新用户信息
        form.on('submit(formDemo)', function (data) {
            var data = data.field;
            // layer.msg(JSON.stringify(data.field));
            // console.log(data)
            $.ajax({
                url: "${pageContext.request.contextPath}/user/updateAllUserInfo",
                type: "post",
                data: JSON.stringify(data),
                contentType: 'application/json',
                processDate: false,
                success: function (res) {
                    if (res.code == 0) {
                        $("#updateMainBox").css("display", "none");
                        $("#updateHiddenBox").css("display", "none");
                        form.render();
                        userListTable.reload();
                        return;
                    } else {
                        $("#updateMainBox").css("display", "none");
                        $("#updateHiddenBox").css("display", "none");
                        form.render();
                        layer.msg(res.msg);
                    }

                    // return;
                }
            })
            // return false;
        });

        // form.on('submit(addUserButton)', function (data) {
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });


        var userListTable = table.render({
            elem: '#test-table-operate'
            , url: '${pageContext.request.contextPath}/user/userList'
            // , width: admin.screen() > 1 ? 892 : ''
            // , width: '100%'
            // , height: 332
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            }
            , toolbar: 'default',
            page: true,
            limits: [10, 15, 20]
            , cols: [[
                // {type: 'checkbox', fixed: 'left'},
                {
                    field: 'imgPath', title: '头像', width: 60, templet: function (d) {
                        return userImg(d)
                    }
                },
                {field: 'userName', title: '姓名'}
                , {field: 'userNickname', title: '昵称'}
                , {field: 'systemPassword', title: '系统密码'}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        return template(d)
                    }
                }
                , {field: 'userPhone', title: '电话'}
                , {field: 'occupationType', title: '职位'}
                , {field: 'birthday', title: '出生日期'}
                , {width: 300, align: 'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
            ]]
        })


        //监听表格复选框选择
        table.on('checkbox(test-table-operate)', function (obj) {
            // console.log(obj)
        });

        //监听工具条
        table.on('tool(test-table-operate)', function (obj) {
            if (obj.event === 'detail') {
                var formData = obj.data;
                if (formData.occupationType == "业主"){
                    formData.occupationType = 3
                }
                if (formData.occupationType == "物业维修"){
                    formData.occupationType = 2
                }
                if (formData.occupationType == "管理员"){
                    formData.occupationType = 1
                }
                if (formData.status == "正常"){
                    formData.status = 1;
                    openEditBox();
                    form.on('submit(noticeBtn)', function (data) {
                        var data = data.field;
                        data.id = formData.id;
                        data.banReason = editor.txt.html();
                        // layer.msg(JSON.stringify(data.field));
                        $.ajax({
                            url: "${pageContext.request.contextPath}/user/updateUserBanReason",
                            type: "post",
                            data: JSON.stringify(data),
                            contentType: 'application/json',
                            processDate: false,
                            success: function (res) {
                                if (res.code == 0){
                                    closeEditBox();
                                    $("#content").val("");
                                }else {
                                    closeEditBox();
                                    $("#content").val("");
                                    layer.msg(res.msg);
                                }
                            }
                        })
                    });
                } else {
                    formData.status = 0
                }
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/updateUserStatus",
                    type: "post",
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    processDate: false,
                    success: function (res) {
                        // console.log(res);
                        userListTable.reload();
                    }
                })

            } else if (obj.event === 'del') {
                var data = obj.data;
                layer.confirm('真的要删除么', function (index) {
                    // console.log(data);
                    console.log(index);
                    var id = data.id;
                    if (index > 0) {
                        $.ajax({
                            url: "${pageContext.request.contextPath}/user/deleteUser",
                            type: "post",
                            data: JSON.stringify(id),
                            contentType: 'application/json',
                            processDate: false,
                            success: function (res) {
                                // console.log(res);
                                userListTable.reload();
                                // return;
                            }
                        })
                        layer.close(index);
                        return;
                    }
                    layer.msg("删除失败")
                });
            } else if (obj.event === 'edit') {
                var data = obj.data;
                // layer.alert('编辑行：<br>' + JSON.stringify(data))
                $("#updateMainBox").css("display", "block");
                $("#updateMainBox").css("z-index", "9999999");
                $("#updateHiddenBox").css("display", "block");
                $("#updateUserId").val(data.id);
                $("#updateUserName").val(data.userName);
                $("#updateUserNickname").val(data.userNickname);
                $("#updateSystemPassword").val(data.systemPassword);
                $("#updateUserPhone").val(data.userPhone);
                $("#updateBirthday").val(data.birthday);
                $("#updateIdCard").val(data.idCard);
                $("#updateStatus").val(data.status);
                if (data.occupationType == "管理员") {
                    // $("#updateOccupationType").val(1);
                    document.getElementById("occupationTypeItem1").setAttribute("selected", "selected");
                }
                if (data.occupationType == "物业维修") {
                    // $("#updateOccupationType").val(2);
                    document.getElementById("occupationTypeItem2").setAttribute("selected", "selected");
                }
                if (data.occupationType == "业主") {
                    // $("#updateOccupationType").val(3);
                    document.getElementById("occupationTypeItem3").setAttribute("selected", "selected");

                }

            }
        });

        $("#updateReturnWindows").click(function updateReturnWindows() {
            $("#updateMainBox").css("display", "none");
            $("#updateHiddenBox").css("display", "none");
        })

        $("#addReturnWindows").click(function addReturnWindows() {
            $("#addMainBox").css("display", "none");
            $("#addHiddenBox").css("display", "none");
        })


        $("#closeEditBox").click(function () {
            closeEditBox();
        })


        function openEditBox() {
            $("#editBanReasonHiddenBox").css("display", "block");
            $("#editBanReasonHiddenBox").css("z-index", "9999999");
            $("#editBanReasonMainBox").css("display", "block");
            $("#editBanReasonMainBox").css("z-index", "9999999");
        }

        function closeEditBox() {
            $("#editBanReasonHiddenBox").css("display", "none");
            $("#editBanReasonMainBox").css("display", "none");
        }

        $("#addUserButton").click(function () {
            var data = form.val("addForm");
            // console.log(data);
            verification(data);
            // console.log(2)
            $.ajax({
                url: "${pageContext.request.contextPath}/user/addUser",
                type: "post",
                data: JSON.stringify(data),
                contentType: 'application/json',
                processDate: false,
                success: function (res) {
                    // console.log(res);
                    $("#addMainBox").css("display", "none");
                    $("#addHiddenBox").css("display", "none");
                    refreshAddUserForm()
                    userListTable.reload();
                    return;
                },
                error: function () {
                    $("#addMainBox").css("display", "none");
                    $("#addHiddenBox").css("display", "none");
                    refreshAddUserForm();
                    userListTable.reload();
                    return;
                }
            })
        });

        // 使添加用户表单刷新
        function refreshAddUserForm() {
            // console.log(3);
            form.val("addForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                "userName": '' // "name": "value"
                , "userNickname": ''
                , "systemPassword": ''
                , "userPhone": ''
                , "birthday": ''
            });
        }

        //验证数据不为空
        function verification(obj) {
            for (var key in obj) {
                // console.log('not null')
                if (key == null || key == '') {
                    // console.log('null')
                    return;
                }
            }
        }


        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('test-table-operate');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
        };

        $('.test-table-operate-btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            // console.log(data)
            active[type] ? active[type].call(this) : '';
        });

        //头部工具栏监听事件
        table.on('toolbar(test-table-operate)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    // layer.msg('添加');
                    $("#addMainBox").css("display", "block");
                    $("#addMainBox").css("z-index", "9999999");
                    $("#addHiddenBox").css("display", "block");
                    break;
                case 'delete':
                    // layer.msg('删除');
                    break;
                case 'update':
                    // layer.msg('编辑');
                    break;
            }
            ;
        });


    })
</script>
</body>
</html>